
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
	<link rel="shortcut icon" href="images/metabologo.png" type="image/x-icon" />
	<META http-equiv="content-type" content="text/html; charset=utf-8">
	<TITLE>MetaboBase</TITLE>
	<style type="text/css" title="currentStyle">
                        @import "lib/css/demo_page.css";
                        @import "lib/css/demo_table.css";
        </style>
	<LINK rel="stylesheet" type="text/css" href="lib/css/jquery.ui.all.css">
	<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
        <LINK rel="stylesheet" type="text/css" href="css/style.css">
	<STYLE type="text/css">
	html, body {
		width:		99%;
		height:		99%;
		padding:	0;
		margin:		0;
		/*overflow:	hidden !important;*/
	}
	span.mheadlinks 
	{
   	/*position:absolute;*/
   	/*width:100px;*/
   	/*height: 20px;*/
   	margin: 5 auto;
	float: right;
	font-size: 11px;
	color: white;
	}
	#optional-container {
		width:			99%;
		height:			99%;
		margin-top:		1%;
		margin-right:	0%;
		margin-left:   0%;
		margin-bottom: 1%
		overflow: scroll;
	}
	.ui-layout-pane-north,
	.ui-layout-pane-south{
    		overflow: hidden !important;
	}
	/*.ui-layout-center { overflow: scroll; }*/
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -o-border-radius:2px;
  -ms-border-radius:2px;
  border-radius:2px;
	}
	

	</STYLE>
	<SCRIPT type="text/javascript" src="lib/js/jquery.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="lib/js/jquery-ui-latest.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="lib/js/jquery.layout-latest.js"></SCRIPT>
	<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css" media="all">
        <script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="lib/js/typeahead.js"></script>
	<script type="text/javascript" src="lib/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="lib/js/highcharts.js"></script>
        <script type="text/javascript" src="lib/js/exporting.js"></script>
	<link rel="stylesheet" href="lib/js/messi.min.css" />
	<script src="lib/js/messi.js"></script>

	<script type="text/javascript" src="lib/arbor.js"></script>
        <script type="text/javascript" src="lib/cytoscape.min.js"></script>
        <script type="text/javascript" src="lib/cytoscape.layout.arbor.min.js"></script>
	<script type="text/javascript" src="js/library_compounds.js"></script>
	<script type="text/javascript" src="js/spectrum.js"></script>
	<script type="text/javascript" src="js/spectrum_annotation.js"></script>
	<script type="text/javascript" src="js/custom_plot.js"></script>
	<script type="text/javascript" src="js/elements.js"></script>
	<script type="text/javascript" src="js/atom_transitions.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<SCRIPT type="text/javascript">
	var myLayout;
	var oTable;
        var chromatogramTable;
        var spectrumTable;
	var compoundTable;
        var compoundSpectrumTable;
	var spectrumAnnotationTable;
        var ri_val;
	var precursorTypeAhead = null;
	var csearchTypeAhead = null;
	var datafileTypeAhead = null;
	var deagTypeAhead = null;
	$(document).ready(function(){
		var jqtabs = $("#tabs_div").tabs();
		var tempV = ['New York','Cleveland', 'Detroit', 'Seattle', 'Helsinki'];
	        precursorTypeAhead = $('#compound_precursor').typeahead({source: tempV, items:20});
		deagTypeAhead = $('#deag_dynamic').typeahead({source: tempV, items:20});
		csearchTypeAhead = $('#search_input').typeahead({source: tempV, items:10});
		datafileTypeAhead = $('#chromatogram_id').typeahead({source: tempV, items:10});
		$("#search_input").change(process_search);
		$("#compound_precursor").change(process_compound_precursor);
		$("#compound_synonym").change(update_synflag);
		$("#chromatogram_id").change(identify_df_key);
		$(".header-footer").hover(
			function(){ $(this).addClass('ui-state-hover'); },
			function(){ $(this).removeClass('ui-state-hover'); }
		);
		//myLayout = $('#optional-container').layout({west__initClosed: true,east__initClosed:true, south__initClosed: true});
		myLayout = $('#optional-container').layout({
		//	reference only - these options are NOT required because 'true' is the default
			closable:					true	// pane can open & close
		,	resizable:					true	// when open, pane can be resized 
		,	slidable:					true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
		,	livePaneResizing:			true
		//	some resizing/toggling settings
		,	north__slidable:			false	// OVERRIDE the pane-default of 'slidable=true'
		,	north__togglerLength_closed: '100%'	// toggle-button is full-width of resizer-bar
		,	north__spacing_closed:		20		// big resizer-bar when open (zero height)
		,	south__resizable:			false	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:		0		// no resizer-bar when open (zero height)
		,	south__spacing_closed:		20		// big resizer-bar when open (zero height)
		//	some pane-size settings
		,	west__minSize:				100
		,	east__size:					300
		,	east__minSize:				200
		,	east__maxSize:				.5 // 50% of layout width
		,	center__minWidth:			100
		//	some pane animation settings
		,	west__animatePaneSizing:	false
		,	west__fxSpeed_size:			"fast"	// 'fast' animation when resizing west-pane
		,	west__fxSpeed_open:			1000	// 1-second animation when opening west-pane
		,	west__fxSettings_open:		{ easing: "easeOutBounce" } // 'bounce' effect when opening
		,	west__fxName_close:			"none"	// NO animation when closing west-pane
		//	enable showOverflow on west-pane so CSS popups will overlap north pane
		,	west__showOverflowOnHover:	true
		//	enable state management
		//,	stateManagement__enabled:	true // automatic cookie load & save enabled by default
		,	showDebugMessages:			true // log and/or display messages from debugging & testing code
		,west__initClosed: true,east__initClosed:true, south__initClosed: true
		});
		myLayout.sizePane("west", 500);
		myLayout.sizePane("east", 500);
		myLayout.sizePane("north", 60);
		$("#search_input").css("display","inline");
		init_compound_library();
		$( "#tabs_div" ).bind( "tabsselect", 
			function(){ $.ajax({
                                type: "POST",
                                url:  "/cgi-bin/get_experiments.cgi",
                                success: function(json)
                                {
                                        var jo  = $.parseJSON(json);
                                        oTable = $('#exp_metabo_tbl').dataTable( {
                                        "bProcessing": true,
					"bDestroy": true,
                                        "aaData": jo.aaData,
                                        fnDrawCallback: function() {
                                                dblclickExperiment();
                                                }
                                        });
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
			})	
               });
       }); //end of .ready

	function dblclickExperiment(){
                        //document.getElementById("cdf_highchart").style.display = "none";
                        //if (selectedData == undefined)
                        //      return;
                        $('#exp_metabo_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        var selectedData = oTable.fnGetData( this );
                        var iId = selectedData[0];
                        $('#experimentselected').html("Experiment:"+selectedData[3]);
                        document.getElementById("cdf_chartdiv").style.display = "block";
                        $("#cdf_dialog").html("<img src='images/demo_wait.gif' />");
                        processChromatogramSpectrum(iId);
                        return;
                        });
                }

                function dblclickChromatogram(){
                         $('#cdf_spectrum_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        var selectedData = chromatogramTable.fnGetData( this );
                        var cId = selectedData[0];
                        $('#chromatogramselected').html("Chromatogram:"+selectedData[2]);
                        document.getElementById("spectral_chartdiv").style.display = "block";
                        processSpectrum("cdf_rirt_tbl", cId);
                        return;
                        });
                }

		 function processChromatogramSpectrum(eid){
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (chromatogramTable != undefined)
                                chromatogramTable.fnClearTable();
                        //important to set type to GET for passing variables within URL
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/get_chromatogram.cgi?eid=" + eid,
                                success: function(json)
                                {
                                        $("#cdf_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        chromatogramTable = $('#cdf_spectrum_tbl').dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        fnDrawCallback: function() {
                                               dblclickChromatogram();
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }

		function processSpectrum(specdiv, cid){
                        $("#spec_dialog").html("<img src='images/demo_wait.gif' />");
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (spectrumTable != undefined)
                                spectrumTable.fnClearTable();
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/get_spectrum.cgi?cid=" + cid,
                                success: function(json)
                                {
                                        $("#spec_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        spectrumTable = $('#'+specdiv).dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        "iDisplayLength": 25,
                                        fnDrawCallback: function() {
                                                //alert("todo - spectral event");
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }
	</SCRIPT>
</HEAD>
<BODY>

<DIV id="optional-container">
	<DIV class="ui-layout-north" id="northheader">
	<img src="images/unilulogo.jpg" width=40 height=40> &nbsp; &nbsp;</img>
	<img src="images/lcsblogo.jpg" width=40 height=40> &nbsp; &nbsp; <b></b></img>
	<b>MetaboBase@Metabolomics Group:Luxembourg Centre for Systems Biomedicine</b> <span class="mheadlinks"><a href="mailto:daniel.weindl@uni.lu">Contact</a>&nbsp; <a href="https://code.google.com/p/metabobase/issues/list" target="_blank">Report Issues</a><a href="http://metabolomics.uni.lux/~dweindl/mddb/stats.php">&nbsp; Stats</a>
&nbsp; <a href="http://metabolomics.uni.lux/~dweindl/mddb/data.php">Data Files</a>
</span>
	</DIV>
	<DIV id="tabs_div" class="ui-layout-center">
		<UL style="-moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0;">
			<LI><A href="#compound_library_tab"><SPAN>Compounds</SPAN></A></LI>
			<LI><A href="#experiment_chromatography_tab"><SPAN>Chromatogram</SPAN></A></LI>
		</UL>
		<ul onmouseover="myLayout.allowOverflow(this)" onmouseout="myLayout.resetOverflow('center')">
		<DIV class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0; padding-bottom: 1em;">
	

		<DIV id="experiment_chromatography_tab">
			<div id="container">
                        <h3>Experiments - Chromatogram - Spectrum - Peaks</h3>
                        <div id="dynamic">
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="exp_metabo_tbl">
                        <thead>
                        <tr>
                        <th width="10%">ExperimentId</th>
                        <th width="15%">Experimenter</th>
                        <th width="10%">Date</th>
                        <th width="25%">Description</th>
                        <th width="15%">Organism</th>
                        <th width="15%">SampleType</th>
                        <th width="10%">CDFFiles</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                        <th width="10%">ExperimentId</th>
                        <th width="15%">Experimenter</th>
                        <th width="10%">Date</th>
                        <th width="25%">Description</th>
                        <th width="15%">Organism</th>
                        <th width="15%">SampleType</th>
                        <th width="10%">CDFFiles</th>
                </tr>
                </tfoot>
        </table>


<div id="cdf_dialog"></div>
<div id="cdf_chartdiv" style="display: none"><h1>Chromatogram</h1><span id="experimentselected">Experiment Description ...</span>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_spectrum_tbl">
                        <thead>
                        <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
                </tfoot>
                </table>
</div>
<div id="spec_dialog"></div>
<div id="spectral_chartdiv" style="display: none"><h1>Spectrums</h1><span id="chromatogramselected">Experiment Description ...</span>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_rirt_tbl">
                        <thead>
                        <tr>
                        <th width="10%">Id</th>
                        <th width="20%">RI</th>
                        <th width="20%">RT</th>
                        <th width="50%">Spectral Peaks</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                <th width="10%">Id</th>
                <th width="20%">RI</th>
                <th width="20%">RT</th>
                <th width="50%">Spectral Peaks</th></tr>
                </tfoot>
                </table>
        </div> 
</div>
<div class="spacer"></div>
</div>
	</DIV>

	<DIV id="compound_library_tab">
		<div>
			<input type="search" style="display:block" size="30" name="search_input" id="search_input" placeholder="Compound name" data-provide="typeahead">
			&nbsp;<button id="searchCompound" value="Search" onClick="search_library_compound()">Search</button>
			
			<a href=javascript:show_compound_form(null)><font size="-2">Add Compound</font></a></div>
			
		<div id="cl_msg" >Displaying latest 100 compounds</div>
	<div id="compound_container">
		<div id="compound_library_dialog"></div>
        	<div id="compound_dynamic">
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_metabo_tbl">
                        <thead>
                        <tr>
                	 <th width="1%">CompoundId</th>
                        <th width="30%">Name</th>
			<th width="20%">Formula</th>
			<th width="15%">NominalMass</th>
                        <th width="15%">MonoisotopicMass</th>
                        <th width="15%">MolecularWeight</th>
			</tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
			<th width="1%">CompoundId</th>
                        <th width="30%">Name</th>
                        <th width="20%">Formula</th>
                        <th width="15%">NominalMass</th>
			<th width="15%">MonoisotopicMass</th>
			<th width="15%">MolecularWeight</th>
		</tr>
                </tfoot>
        	</table>
		</div>
	</div>
	</DIV> <!-- end of compound_library_tab -->
		</DIV>
	</DIV>

	<DIV class="ui-layout-west"> 
		<div id="chart_div"></div>
		<div id="precursor_details_view"></div>
	</DIV>
	<DIV class="ui-layout-east">
		<span id="compound_form_msg"></span>
		<div id="spectrum_form">
			<label for="chromatogram_id">Data file:</label>
                        <input size="75" name="chromatogram_id" id="chromatogram_id"  placeholder="Type data file..." data-provide="typeahead">

			<label for="sp_ri">RI:</label>
                	<input style="display:block" size="50" name="sp_ri" id="sp_ri" type="text">
			<!-- <span><fieldset> -->
			    <!-- <legend>RT:</legend> -->
			<label for="sp_rtmin">RT min:</label>
    			<input style="display:block" name="sp_rtmin" size="50" id="sp_rtmin" type="text">
    			<label for="sp_rtsec">RT sec:</label><input style="display:block" size="50" name="sp_rtsec" id="sp_rtsec" type="text">
    			<label for="sp_rtmils">RT mils:</label><input style="display:block" size="50" name="sp_rtmils" id="sp_rtmils" type="text">
  			<!-- </fieldset> -->
			<!-- </span>-->
			<label for="sp_resolution">Resolution:</label>
			<input style="display:block" size="50" value="1" name="sp_resolution" id="sp_resolution" type="text">
			<label>Origin:</label>
		        <select id = "spectrum_origin_id" name="spectrum_origin_id" style="display:block">
	               		<option value = "1">LCSB</option>
        	       		<option value = "2">TUBS</option>
               			<option value = "3">NIST</option>
             		</select>
			<!-- spectrum user comments -->
			<label for="spectral_comments"><a href="#" class="atooltip" data-tip="User comments">Comments</a></label>
                        <textarea style="display:block" rows="3" cols="50" place_holder="User comments" name="spectral_comments" id="spectral_comments" ></textarea>
			<label for="spectral_peaks"><a href="#" class="atooltip" data-tip="Spectral peaks include mz and intensity, and need to be one pair per row">Spectral peaks</a></label>
                	<textarea style="display:block" rows="10" cols="50" place_holder="mz intensity pairs" name="spectral_peaks" id="spectral_peaks" ></textarea>
			<button id="newSpectrumButton" onClick="associate_compound_spectrum(null)">Add</button>                
			<button id="hideSpectrumButton" onClick="hide_spectrum(null)">Cancel</button>			
		</div>
		<div id="spectrum_annotation_form" style="display: none">
			<span class="table_header_style">Mass spectra</span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_spectral_tbl">
                        	<thead>
                        	<tr>
                        		<th width="10%">Id</th>
                        		<th width="15%">RI</th>
                        		<th width="15%">Origin</th>
                        		<th width="15%">Date</th>
					<th width="30%">Comments</th>
					<th width="10%"></th>
                		</tr>
        			</thead>
        			<tbody>
        			</tbody>
			</table>
			<br>
			<span class="table_header_style">Spectrum annotation</span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="spectrum_annotation_tbl">
                                <thead>
                                <tr>
                                        <th width="10%">m/z</th>
                                        <th width="20%">Formula</th>
                                        <th width="10%">MMI</th>
					<th width="30%">Comment</th>
					<th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
			<label for="spa_peak_mz"><a href="#" class="atooltip" data-tip="Spectral peak">m/z</a></label>
                        <input style="display:block" size="50" id="spa_peak_mz" >
                        <label for="spa_formula"><a href="#" class="atooltip" data-tip="Spectral Formula">Formula</a></label>
                        <input style="display:block" size="50" id="spa_formula">
			<label for="spa_isotope_max_mass"><a href="#" class="atooltip" data-tip="Max isotope max for labeling">Max mass isotopomer</a></label>
                        <input style="display:block" size="50" id="spa_isotope_max_mass">

			<label for="spa_inchi"><a href="#" class="atooltip" data-tip="Inchi text">Inchi</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="inchi text" id="spa_inchi" ></textarea>
			<label for="spa_comment"><a href="#" class="atooltip" data-tip="Readable molecule fragment comments">Comment</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="e.h. [M-TMS]+ or [M-CO2-CH3]+" id="spa_comment" ></textarea>
                        <button id="newSpaButton" onClick="associate_spectrum_annotation(null)">Add</button>
                        <button id="hideSpaButton" onClick="hide_spectrum_annotation(null)">Cancel</button>
                </div>

		<div id="compound_form">
		<input type="hidden" name="compound_id" id="compound_id" >
		<input type="hidden" id="precursor_id" value="">
		<input type="hidden" id="synonym_changed" value="">
                <label for="compound_name"><a href="#" class="atooltip" data-tip="Compound name is required">Name</a></label>
                <input style="display:block" size="50" name="compound_name" id="compound_name" >
                <label for="compound_synonym"><a href="#" class="atooltip" data-tip="One synonym entry per row">Synonyms</a></label>
                <textarea style="display:block" rows="1" cols="30" name="compound_synonym" id="compound_synonym" ></textarea>
		<label for="compound_precursor"><a href="#" class="atooltip" data-tip="Optional, but precursor compound must be valid, use lookup service">Precursor</a>&nbsp;<span id="precursor_details"></span></label>
                <input style="display:block" size="50" name="compound_precursor" id="compound_precursor" placeholder="Type compound..." data-provide="typeahead">
		<label for="derivation_reagent"><a href="#" class="atooltip" data-tip="Required for Precursor Compound">Derivatization Reagent</a></label>
                <select id = "derivation_reagent" name="derivation_agent" style="display:block">
                                <option value = "na"></option>
                </select>
		<input type="hidden" id="precursor_mode" value="insert" >
		<div id="derivation_groups" style="display:none">
                 </div>
                <label for="sum_formula"><a href="#" class="atooltip" data-tip="Formula is required for calculation of mass and weight">Formula</a></label>
                <input style="display:block" size="50" name="sum_formula" id="sum_formula" onChange="updateFormula()">
                <label for="nominal_mass">Nominal mass:</label>
                <input style="display:block" size="50" name="nominal_mass" id="nominal_mass" >
		<label for="molecular_weight">Molecular weight:</label>
                <input style="display:block" size="50" name="molecular_weight" id="molecular_weight" >
                <label for="monoisotopic_mass">Monoisotopic mass:</label>                
		<input style="display:block" size="50" name="monoisotopic_mass" id="monoisotopic_mass" >
		<label for="reference_spectrum_id"><a href="#" class="atooltip" data-tip="Spectrum id must exist or use the create new">Spectrum id:</a>&nbsp;<a href=javascript:show_spectrum_form(null)><font size='-2'>New</font></a></label>
                <input style="display:block" size="50" name="reference_spectrum_id" id="reference_spectrum_id" >
		<label for="ref_cas_id"><a href="http://www.cas.org" target="_blank">CAS</a> id:</label>
                <input style="display:block" size="50" name="ref_cas_id" id="ref_cas_id" >
		<label for="ref_pubchem_id"><span id="pubchem_deeplink"><a href="http://pubchem.ncbi.nlm.nih.gov/" target="_blank">Pubchem</a></span> id:</label>
                <input style="display:block" size="50" name="ref_pubchem_id" id="ref_pubchem_id" >
		<label for="ref_hmdb_id"><span id="hmdb_deeplink"><a href="http://www.hmdb.ca" target="_blank">HMDB</a></span> id:</label>
                <input style="display:block" size="50" name="ref_hmdb_id" id="ref_hmdb_id" >
		<label for="ref_nist_id"><a href="http://webbook.nist.gov/chemistry" target="_blank">NIST</a> id:</label>
                <input style="display:block" size="50" name="ref_nist_id" id="ref_nist_id" >
		<label for="ref_chemspider_id"><span id="chemspider_deeplink">Chemspider id</span></label>
                <input style="display:block" size="50" name="ref_chemspider_id" id="ref_chemspider_id" >
		<label for="ref_cas_id"><span id="kegg_deeplink"><a href="http://www.genome.jp/kegg/ligand.html" target="_blank">KEGG id</a></span></label>
                <input style="display:block" size="50" name="ref_kegg_id" id="ref_kegg_id" >

		<label for="inchi">Inchi:</label>
                <input style="display:block" size="50" name="inchi" id="inchi" >
		<label for="inchi_key">Inchi key:</label>
		<textarea style="display:block" rows="2" cols="50" name="inchi_key" id="inchi_key" ></textarea>
		<label for="lcchecked">Checked:</label>
                <input type="checkbox" style="display:block" name="lcchecked" id="lcchecked" >
                <label for="comments">Comments:</label>
                <textarea style="display:block" rows="2" cols="50" name="lccomment" id="lccomment" ></textarea>
              
                <button id="newCompoundButton" onClick="post_library_compound(null)">Submit</button>
		<button id="hideCompoundButton" onClick="hide_compound_details(null)">Cancel</button>
		<button id="newCompoundButton" onClick="delete_library_compound(null)">Delete</button>
        	</div>
                <div id="form_div"></div>
        </DIV>
	<!--	<DIV class="ui-layout-south"> South </DIV>	-->


</DIV>
</DIV>
</BODY>
</HTML>
